<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/zl.png" alt="">
      </div>
      <h2>总览信息</h2>
    </div>
    <div class="modular_overview">
      <div class="item">
        <div class="icon">
          <img src="@/assets/img/sb.png" alt="">
        </div>
        <div class="item_cont">
          <h2>泵房</h2>
          <h3>{{ info.siteTotal }}</h3>
        </div>
      </div>
      <div class="item">
        <div class="icon">
          <img src="@/assets/img/jz.png" alt="">
        </div>
        <div class="item_cont">
          <h2 class="yellow">泵组</h2>
          <h3>{{ info.deviceTotal }}</h3>
        </div>
      </div>
    </div>
    <div class="overview_info">
      <div class="item">
        <div class="icon">
          <img src="@/assets/img/zc.png" alt="">
        </div>
        <div class="item_cont">
          <h2>{{ info.siteNormal }}</h2>
          <h3>正常</h3>
        </div>
      </div>
      <div class="item">
        <div class="icon">
          <img src="@/assets/img/bj.png" alt="">
        </div>
        <div class="item_cont">
          <h2 class="num2">{{ info.siteWarning }}</h2>
          <h3>报警</h3>
        </div>
      </div>
      <div class="item">
        <div class="icon">
          <img src="@/assets/img/lx.png" alt="">
        </div>
        <div class="item_cont">
          <h2 class="num3">{{ info.siteOff }}</h2>
          <h3>离线</h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      info: []
    }
  },
  async created() {
    // 接口参数
    const id = { tenantid: 1128 }
    const res = await api.overview(id)
    this.info = res.data[0]
  }
}
</script>

<style lang="scss" scoped>
.modular {

  .modular_overview {
    padding: 0.57rem 0.11rem 0.11rem;
    display: flex;
    justify-content: space-between;

    .item {
      width: 48.8%;
      display: flex;
      justify-content: space-between;
      background: linear-gradient(180deg, rgba(69, 113, 202, 0.8), #19397A);
      box-shadow: 0px 6px 9px 1px rgba(7, 27, 57, 0.4);

      .icon {
        display: flex;
        align-items: center;

        img {
          width: 100%;
          padding-left: 0.07rem;
        }
      }

      div {
        width: 50%;
      }

      .item_cont {
        padding-left: .07rem;
        padding-top: .26rem;
        padding-bottom: .2rem;

        .yellow {
          color: #FFAE00;
        }

        h2 {
          padding: 0 .05rem;
          font-weight: 400;
          font-size: .2rem;
          font-family: 'Pang';
          font-style: italic;
          color: #00EFFF;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            width: .47rem;
            height: 1px;
            background: #5FA1FF;
            opacity: 0.6;
            bottom: 0;
            left: .05rem;
          }
        }

        h3 {
          font-size: .24rem;
          font-family: 'Pang';
          font-weight: bold;
          font-style: italic;
          color: #FFFFFF;
          background: linear-gradient(0deg, #33A2F7 0%, #ACEEFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          padding: .03rem 0 0 .04rem;
          letter-spacing: .02rem;
        }
      }
    }
  }

  .overview_info {
    padding: 0rem 0.39rem 0.4rem 0.39rem;
    display: flex;
    justify-content: space-between;

    .item {
      display: flex;
      width: 28%;

      .icon {
        display: flex;
        align-items: center;

        img {
          width: 0.4rem;
          margin: 0.3rem 0.15rem 0 0;
        }
      }

      .item_cont {

        .num2 {
          color: #FF2D17;
        }

        .num3 {
          color: #828282;
        }

        h2 {
          font-size: .19rem;
          margin: .27rem 0 .05rem -.04rem;
          font-family: "din";
          font-weight: bold;
          color: #17E8FF;
          text-align: center;
        }

        h3 {
          font-size: .14rem;
          // font-family: Microsoft YaHei;
          font-weight: 400;
          color: #BDE2FF;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>